import React, { Suspense, useState } from 'react';
import { Outlet, NavLink } from 'react-router-dom';
import _ from 'lodash';
import { menuConfig } from '@/config/menuConfig';
import Fallback from './pages/FallBack';
import { AppContext } from '@/config/glableContextConfig';
import Commonaudio from './common/CommonAudio';
import './styles/index.less';

const { Provider } = AppContext;

const App = () => {
  const [list_key, setList_key] = useState(0);
  const [songList, setSongList] = useState([]);
  const [isPlayer, setIsPlayer] = useState(false);

  const commonaudioProps = {
    list_key,
    setList_key,
    songList,
    isPlayer,
    setIsPlayer,
  };
  return (
    <Provider value={{ setSongList, setList_key, setIsPlayer }}>
      <div className="layout">
        <div className="menu">
          <ul>
            {_.map(menuConfig, (item, key) => {
              const path = Array.isArray(item.path) ? item.path[0].path : item.path;
              return (
                <li key={item.id}>
                  <NavLink to={path} style={({ isActive }) => (isActive ? { color: '#dd6d60' } : {})}>
                    <span className={`iconfont text-icon ${item.icon}`}></span>
                    {item.name}
                  </NavLink>
                </li>
              );
            })}
          </ul>
        </div>
        <div className="content">
          <div style={{ maxWidth: 1100, margin: '0 auto' }}>
            <Suspense fallback={<Fallback />}>
              <Outlet />
            </Suspense>
          </div>
        </div>

        <Commonaudio {...commonaudioProps} />
      </div>
    </Provider>
  );
};

export default App;
